<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>websocket通信客户端</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>

<div class="form-inline p-2">
    <label class="sr-only" for="name">Name</label>
    <input type="text" class="form-control mb-2 mr-sm-2" placeholder="insert Name" id="name">

    <button class="btn btn-primary mb-2" id="connect">Connect</button>
    <button class="btn btn-danger ml-2" id="disconnect">Disconnect</button>
</div>

<div id="content" class="m-auto container bg-light" ></div>

<div class="form-inline p-2">
    <label class="sr-only" for="msg">MSG</label>
    <input type="text" class="form-control mb-2 mr-sm-2" placeholder="message" id="msg">

    <button class="btn btn-primary mb-2" id="send">Send</button>
</div>


</body>
<script type="text/javascript">
    $(document).ready(function () {
        console.log('ready')
        var ws;

        const ws2 = new WebSocket('ws://localhost:8000/channel_on')
        setTimeout(function () {
            console.log(ws2.readyState)
            ws2.send(JSON.stringify({channel:'haiwk-01'}))
            console.log('send ok')
        }, 3000)

        ws2.onmessage = function (e) {
            //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
            console.log('ws2:', e.data);
        }

        $("button#disconnect").click(function () {
            $("#content").html($("#content").html() + "<p class='text-right'> I : Bye</p>")
            ws.close()
        })

        $("button#connect").click(function () {
            var name = document.getElementById("name").value
            var uri = "ws://localhost:8765/" + name
            ws = new WebSocket(uri)
            console.log(ws)
            ws.onopen = function () {
                //当WebSocket创建成功时，触发onopen事件
                console.log('open')
                // ws.send('hello')
            }
            ws.onmessage = function (e) {
                //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
                console.log(e);
                $("#content").html($("#content").html() + "<p>" + e.data + "</p>")
            }
            ws.onclose = function (e) {
                console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
                console.log(e)
            }
            ws.onerror = function (e) {
                //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
                console.log(e);
            }
            console.log(ws.readyState)
        })

        $("button#send").click(function () {
            var message = document.getElementById("msg").value;
            $("#content").html($("#content").html() + "<p class='text-right'> I : " + message + "</p>")
            ws.send(message);
        })


    })
    // function sendMeg() {
    //     var message = document.getElementById("msg").value;
    //     document.getElementById("content").value += message + "\n\n";
    //     window.s.send(message);
    // }


</script>

</html>